<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    <title>Document</title>
</head>
<body>
    <br><br><br>
    <table>
        <tr></tr>
    </table>
    <input type="range" id="theta" min=-90 max=90 onmousemove="change_para()">
    <button id="stop" onclick="stop_car()">Stop</button>
    <input type="range" id="speed" min=-80 max=80 onmousemove="change_para()">
    <h1>实时传输</h1>
    <table>
        <tr>
            <td><img id='video' src=""></td>
            <td><img id='panda' src=""></td>
        </tr>
    </table>
     <script>
         var theta_obj=document.getElementById("theta");
         var speed_obj=document.getElementById("speed");
         theta_obj.addEventListener("touchmove",change_para);
         speed_obj.addEventListener("touchmove",change_para)
         const Move_Url="";
         const Stop_Url="http://localhost:5000/stop";

         //生成http请求
         var httpRequest=new XMLHttpRequest();
         var cnt=0

         //小车运行速度和角度
         var speed=0
         var theta=0

         //关联键盘响应函数
         document.onkeydown=keydown;
         document.onkeyup=keyup;

         var is_speed_down=0
         var is_theta_down=0

         //键盘按下事件响应函数
         function keydown(e){
             var e=e || window.event;
             //键盘W按下响应
             if(e.keyCode==87){
                 if (is_speed_down==1){
                     return;
                 }
                 is_speed_down=1;
                 console.log("前进");
                 speed=80;
                 post_para();
                 update_para()
             }
             //键盘A按下响应
             if (e.keyCode==65){
                 if (is_theta_down==1){
                     return;
                 }
                 is_theta_down=1;
                 console.log("左转");
                 //speed=50;
                 theta=-80;
                 post_para();
                 update_para()
             }
             //键盘S按下相应
             if (e.keyCode==83){
                 if (is_speed_down==1){
                     return;
                 }
                 is_speed_down=1;
                 console.log("后退");
                 speed=-60;
                 post_para();
                 update_para()
             }
             //键盘D按下相应
             if (e.keyCode==68){
                 if (is_theta_down==1){
                     return;
                 }
                 is_theta_down=1;
                 console.log("右转");
                 //speed=50;
                 theta=80;
                 post_para();
                 update_para()
             }
             if (e.keyCode==32){
                 stop_car()
             }
             console.log(speed,theta)
         }

         //键盘释放响应函数
         function keyup(e){
             if (e.keyCode==87||e.keyCode==83){
                 is_speed_down=0;
                 speed=0;
                 post_para();
                 update_para();
             }
             if (e.keyCode==65||e.keyCode==68){
                 is_theta_down=0;
                 theta=0;
                 //speed=0;
                 post_para();
                 update_para();
             }
         }

         //获取页面参数
         function get_para(){
            speed=document.getElementById("speed").value
            theta=document.getElementById('theta').value
         }

         //更新页面参数
         function post_para(){
            document.getElementById("speed").value=speed;
            document.getElementById('theta').value=theta;
         }
         //发送控制参数
         function update_para(){
            httpRequest.open('GET',"/control?speed="+speed+"&theta="+theta,true);
            httpRequest.send();
            // console.log(speed,theta)
        }
        function change_para(event){
            console.log(event);
            speed=document.getElementById("speed").value;
            theta=document.getElementById("theta").value;
            update_para();
        }
        //停止小车车
        function stop_car()
        {
            console.log("停车")
            httpRequest.open('GET',"/stop",true);
            httpRequest.send();
        }
        //刷新实时图像
        function fresh_pic(){
            cnt=(cnt+1)%10
            document.getElementById('video').src="{{ url_for('static',filename='videos/frame') }}"+cnt+".jpg?"+Math.random();
        }
        //刷新二值化图像
        function fresh_dst(){
            cnt=(cnt+1)%10
            document.getElementById('panda').src="{{ url_for('static',filename='pandas/frame_dst') }}"+cnt+".jpg?"+Math.random();
        }
        setInterval("fresh_pic()",150)
        setInterval("fresh_dst()",150)
     </script>
</body>
</html>